<template>
  <div class="warp">
    <div class="contentBox">
      <div>
        <a-upload-dragger v-model:fileList="fileList" :max-count="1" :before-upload="beforeUpload">
          <div class="uploadBox">
            <div>
              <p class="ant-upload-drag-icon">
                <UploadOutlined />
              </p>
              <p class="ant-upload-text">点击/拖拽上传文件</p>
              <p class="ant-upload-hint">仅支持上传单个指定模板文件</p>
            </div>
          </div>
        </a-upload-dragger>
        <div class="uploadBtnBox">
          <a-button type="primary" class="uploadBtn" :disabled="!fileList?.length" @click="upload">上传文件</a-button>
          <a-button type="dashed" class="uploadBtn" @click="details">查看列表</a-button>
        </div>
      </div>
      <a-divider />
      <div>
        查询时间范围：<a-range-picker valueFormat="YYYY-MM-DD" v-model:value="timeValue" />
        <a-button type="primary" class="uploadBtn" :disabled="!timeValue?.length" @click="search">生成</a-button>
      </div>
      <div class="textareaBox">
        <a-textarea :rows="14" readonly v-model:value="content" />
      </div>
    </div>
    <a-drawer v-model:open="open" :width="'90vw'" @afterOpenChange="afterOpenChange">
      <div class="tableBox">
        <a-table :loading="loading" :columns="columns" :data-source="list" :scroll="{ y: 700 }" :pagination="false">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === '内容'">
              <a-tooltip placement="topLeft">
                <template #title>
                  <span>{{ record["内容"] }}</span>
                </template>
                <div class="singeLine">{{ record["内容"] }}</div>
              </a-tooltip>
            </template>
            <template v-if="column.key === '标题'">
              <a-tooltip placement="topLeft" overlayClassName="tipsBoxDom" :overlayStyle="{ width: '400px' }" :overlayInnerStyle="{ width: '400px' }">
                <template #title>
                  <div class="tipsBox">{{ record["标题"] }}</div>
                </template>
                <div class="singeLine">{{ record["标题"] }}</div>
              </a-tooltip>
            </template>
          </template>
        </a-table>
      </div>
      <div class="paginationBox">
        <a-pagination v-model:current="paginationData.current" :total="paginationData.total" :showSizeChanger="false" @change="paginationChange" />
      </div>
    </a-drawer>
    <a-modal v-model:open="modalState" title="上传成功">
      <template #footer>
        <a-button key="back" @click="() => (modalState = false)">关闭</a-button>
      </template>
      <div>{{ uploadMes }}</div>
    </a-modal>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { UploadOutlined } from "@ant-design/icons-vue";
import api from "@/api";
import dayjs from "dayjs";
import { message } from "ant-design-vue";

const fileList = ref([]);
const uploadValue = ref(null);
const timeValue = ref(null);
const modalState = ref(false);
const uploadMes = ref("");

const beforeUpload = (file) => {
  uploadValue.value = file;
  return false;
};

const upload = () => {
  const data = new FormData();
  data.append("file", uploadValue.value);

  api.home
    .upload(data)
    .then((res) => {
      console.log(res);
      fileList.value = [];
      uploadValue.value = [];
      message.success("上传成功");
      uploadMes.value = res.message;
      modalState.value = true;
    })
    .catch((err) => {
      console.log(err);
      message.error("操作失败");
    });
};

const content = ref("");
const search = () => {
  const query = {
    start_t: timeValue.value[0],
    end_t: timeValue.value[1],
    is_detail: "1",
  };
  api.home
    .getDetails(query)
    .then((res) => {
      content.value = res.desc;
    })
    .catch((err) => {
      console.log(err);
      content.value = "";
      message.error("数据获取失败");
    });
};

const open = ref(false);
const loading = ref(false);
const list = ref([]);
const paginationData = reactive({ current: 1, total: 80 });

const columns = [
  {
    title: "来件时间",
    dataIndex: "来件时间",
    key: "来件时间",
    width: 200,
    customRender: ({ text }) => {
      return dayjs(text).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  {
    title: "标题",
    dataIndex: "标题",
    key: "标题",
  },
  {
    title: "内容",
    dataIndex: "内容",
    key: "内容",
  },
  {
    title: "大类",
    dataIndex: "大类",
    key: "大类",
    width: 150,
  },
  {
    title: "类型",
    dataIndex: "类型",
    key: "类型",
    width: 150,
  },
  {
    title: "事发地点",
    dataIndex: "事发地点",
    key: "事发地点",
    width: 100,
  },
  {
    title: "热敏舆情",
    dataIndex: "热敏舆情",
    key: "热敏舆情",
    width: 100,
  },
  {
    title: "处置人数",
    dataIndex: "Num_person",
    key: "Num_person",
    width: 100,
  },
];
const afterOpenChange = (state) => {
  if (!state) return;
  getList();
};
const getList = (page = 1) => {
  loading.value = true;
  const query = {
    page: page - 1,
    size: "10",
  };
  api.home
    .getList(query)
    .then((res) => {
      list.value = res;
    })
    .catch((err) => {
      console.log(err);
      message.error("列表获取失败");
    })
    .finally(() => {
      loading.value = false;
    });
};
const paginationChange = (pagination) => {
  getList(pagination);
};
const details = () => {
  open.value = true;
};
</script>
<style scoped>
.warp {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .contentBox {
    width: 1000px;
    height: 800px;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid #ccc;

    .uploadBox {
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .uploadBtnBox {
      width: 100%;
      display: flex;
      justify-content: flex-end;
    }

    .textareaBox {
      margin-top: 10px;
    }
  }

  .uploadBtn {
    margin-top: 20px;
    margin-left: 10px;
  }
}

.tableBox {
  height: 82vh;
}

.paginationBox {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.singeLine {
  width: 400px;
  /* text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap; */
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.tipsBox {
  width: 500px;
}
.tipsBoxDom {
  width: 500px;
}
</style>
